<template>
  <view class="details-container">
    <scroll-view scroll-y class="scroll-area">
      <view class="content">
        <view v-if="loading" class="loading-container">
          <text class="loading-text">加载中...</text>
        </view>

        <template v-else>
          <!-- 状态头部卡片 -->
          <view class="card status-header">
            <view class="status-left">
              <view class="status-icon">
                <uv-icon name="checkmark-circle" :size="24" :color="'#FF6B35'" />
              </view>
              <text class="status-text">{{ formatOll(orderDetail.status) }}</text>
            </view>
          </view>

          <!-- 地图显示卡片 -->
          <view class="card map-card">
            <view class="map-container">
              <!-- 地图组件 -->
              <map id="orderMap" style="width: 100%;height: 400rpx" :latitude="mapCenter.latitude"
                :longitude="mapCenter.longitude" :markers="mapMarkers"></map>
            </view>
          </view>

          <!-- 用户信息卡片 -->
          <view class="card driver-card">
            <view class="driver-info">
              <view class="driver-avatar">
                <uv-avatar :src="userInfo.avatar" :size="50" shape="circle" />
              </view>
              <view class="driver-details">
                <text class="driver-name">{{ orderDetail.driver_username || '张三' }}</text>
                <text class="driver-phone">{{ orderDetail.driver_mobile || '185622' }}</text>
              </view>
            </view>
          </view>

          <!-- 地址信息卡片 -->
          <view class="card address-card">
            <view class="addr-row">
              <uv-icon name="map-fill" :size="22" color="#FF6B35" />
              <view class="addr-info">
                <text class="addr-label">派送地址</text>
                <text class="addr-text">{{
                  orderDetail.address_detail || ''
                }}</text>
              </view>
            </view>
          </view>

          <!-- 产品信息卡片 -->
          <view class="card product-card">
            <view class="product-left">
              <view class="oil-box">
              <image :src="orderDetail.goods_image" mode="aspectFill" style="width: 100%; height: 100%;" />
              </view>
            </view>
            <view class="product-main">
              <view class="product-title">{{ orderDetail.goods_name || '' }}</view>
              <view class="product-meta">用油量：{{ orderDetail.usage || 1 }}升</view>
            </view>
          </view>

          <!-- 时间信息卡片 -->
          <view class="card time-card">
            <view class="time-row">
              <text class="time-label">下单时间：</text>
              <text class="time-value">{{
                formatDateTime(orderDetail.order_time) || '-'
              }}</text>
            </view>
            <view class="divider"></view>
            <view class="time-row">
              <text class="time-label">使用时间：</text>
              <text class="time-value">{{
                formatDateTime(orderDetail.use_time) || '-'
              }}</text>
            </view>
            <view class="divider"></view>
            <view class="time-row">
              <text class="time-label">完成时间：</text>
              <text class="time-value">{{
                formatDateTime(orderDetail.complete_time) || '-'
              }}</text>
            </view>
          </view>

          <!-- 凭证信息卡片 -->
          <view class="card voucher-card">
            <view class="voucher-header">
              <text class="voucher-title">凭证信息</text>
            </view>
            <view class="voucher-content">
              <view v-if="voucherImages.length === 0" class="no-voucher">
                <text class="no-voucher-text">暂无凭证信息</text>
              </view>
              <view v-else class="voucher-images">
                <view v-for="(image, index) in voucherImages" :key="index" class="voucher-image-wrapper">
                  <image :src="image" mode="aspectFill" class="voucher-image" />
                </view>
              </view>
            </view>
          </view>
        </template>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue'
import { useRequest } from '@/api'
import { UserInfoManager } from '@/utils/userInfo'
import { formatDateTime } from '@/utils/dateTime'
const userInfo = UserInfoManager.getUserInfo()
const { API_JIDAN_DETAIL_GET } = useRequest()

const orderId = ref('')
const orderDetail = ref<any>({})
const loading = ref(false)
const voucherImages = ref<string[]>([])

// 地图相关数据
const mapCenter = ref({
  latitude: 39.9042,
  longitude: 116.4074
})

const mapMarkers = ref<any[]>([])

// 更新地图数据
const updateMapData = () => {
  const { order_lat, order_lng } = orderDetail.value

  if (order_lat && order_lng) {
    // 设置地图中心点
    mapCenter.value = {
      latitude: order_lat,
      longitude: order_lng
    }

    // 设置地图标记
    mapMarkers.value = [
      {
        id: 1,
        latitude: order_lat,
        longitude: order_lng,
        title: '配送地址',
        width: 20,
        height: 30,
        callout: {
          content: orderDetail.value.address_detail || '配送地址',
          color: '#333',
          fontSize: 14,
          borderRadius: 4,
          bgColor: '#fff',
          padding: 8,
          display: 'ALWAYS'
        }
      }
    ]
  }
}


onLoad((options: Record<string, any>) => {
  const id = options?.id ?? options?.orderId
  if (id) {
    try {
      orderId.value = decodeURIComponent(String(id))
    } catch {
      orderId.value = String(id)
    }
    console.log('接收到的订单ID:', orderId.value)
  }
})

// 获取订单详情
const getOrderDetail = async () => {
  if (!orderId.value) {
    uni.showToast({
      title: '订单ID不能为空',
      icon: 'none'
    })
    return
  }

  loading.value = true
  try {
    const params = {
      id: orderId.value,
      isdriver: UserInfoManager.lastrole()
    }
    const res = await API_JIDAN_DETAIL_GET(params)
    if (res.code === 1) {
      orderDetail.value = res.data
      // 处理凭证图片
      if (res.data.voucher) {
        voucherImages.value = res.data.voucher.split(',').filter((url: string) => url.trim())
      }
      updateMapData()
    } 
  } catch (error) {
    
  } finally {
    loading.value = false
  }
}

// 格式化订单状态
const formatOll = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: '待接单',
    delivery: '配送中',
    cancelled: '已取消',
    comeon: '加油中',
    pendingpay: '待付款',
    completed: '已完成'
  }

  return statusMap[status] || '未知状态'
}

// 页面加载时获取参数和详情
onMounted(() => {

  getOrderDetail()
})
</script>

<style lang="scss" scoped>
.details-container {
  min-height: 100vh;
  background: #f6f7f9;
  display: flex;
  flex-direction: column;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

.scroll-area {
  flex: 1;
  padding: 20rpx 0;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 0 24rpx;
}

.card {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
  padding: 24rpx;
}

// 状态头部卡片
.status-header {
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, #fff5e9 0%, #fff 100%);
}

.status-left {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.status-icon {
  width: 48rpx;
  height: 48rpx;
  background: rgba(255, 107, 53, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

// 地图卡片
.map-card {
  padding: 0;
  overflow: hidden;
}

.map-container {
  position: relative;
  height: 400rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
}

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16rpx;
}

.map-text {
  font-size: 28rpx;
  color: #999;
}

.map-disclaimer {
  font-size: 20rpx;
  color: #ccc;
  position: absolute;
  bottom: 16rpx;
  right: 16rpx;
}

.map-marker {
  position: absolute;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
}

.pickup-marker {
  top: 80rpx;
  left: 60rpx;
  background: #52c41a;
}

.destination-marker {
  bottom: 80rpx;
  right: 60rpx;
  background: #ff6b35;
}

.marker-bubble {
  position: absolute;
  top: -80rpx;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 12rpx 16rpx;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  z-index: 10;
}

.bubble-time {
  display: block;
  font-size: 24rpx;
  color: #333;
  font-weight: 600;
  margin-bottom: 4rpx;
}

.bubble-location {
  display: block;
  font-size: 20rpx;
  color: #666;
}

// 用户信息卡片
.user-card {
  padding: 20rpx 24rpx;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.avatar-container {
  width: 80rpx;
  height: 80rpx;
  background: #fff5f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.user-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.user-phone {
  font-size: 28rpx;
  color: #666;
}

// 地址信息卡片
.address-card .addr-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.addr-info {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.addr-label {
  font-size: 28rpx;
  color: #8c8c8c;
}

.addr-text {
  font-size: 30rpx;
  color: #1f1f1f;
  font-weight: 500;
}

// 产品信息卡片
.product-card {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.product-left {
  flex-shrink: 0;
}

.oil-box {
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  background: #fff5f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.oil-box .oil-tag {
  margin-top: 8rpx;
  font-size: 32rpx;
  font-weight: 700;
  color: #1f1f1f;
}

.product-main {
  flex: 1;
}

.product-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #1f1f1f;
  margin-bottom: 8rpx;
}

.product-meta {
  font-size: 28rpx;
  color: #8c8c8c;
}

// 时间信息卡片
.time-card .time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18rpx 0;
}

.time-card .divider {
  height: 1rpx;
  background: #f0f0f0;
}

.time-label {
  font-size: 28rpx;
  color: #8c8c8c;
}

.time-value {
  font-size: 30rpx;
  color: #1f1f1f;
}

// 凭证信息卡片
.voucher-card {
  margin-bottom: 40rpx;
}

.voucher-header {
  margin-bottom: 20rpx;
}

.voucher-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f1f1f;
}

.voucher-content {
  min-height: 120rpx;
}

.no-voucher {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120rpx;
}

.no-voucher-text {
  font-size: 28rpx;
  color: #999;
}

.voucher-images {
  display: flex;
  gap: 16rpx;
  flex-wrap: wrap;
}

.voucher-image-wrapper {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.voucher-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.driver-card .driver-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.driver-avatar {
  flex-shrink: 0;
}

.driver-details {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.driver-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.driver-phone {
  font-size: 28rpx;
  color: #666;
}
</style>
